<template>
	<view class="">
		<div class="top">
			<el-progress type="circle" :width='width' :format="format" :stroke-width="15" :color="customColor"
				:percentage='num'>
			</el-progress>
		</div>
		<view class="bon">
			<div class="top">
				<view class="box">
					<view class="boxx1">
						今日活跃积分
					</view>
					<div class="boxx1">
						12
					</div>
				</view>
				<view class="box">
					<view class="boxx1">
						在线两小时
					</view>
					<div class="boxx1">
						增加5活跃值
					</div>
				</view>
			</div>
		</view>
		<view class="text">
			等级说明:4个等级、初级-中级-高级-可收费回答问题的专家
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				customColor: '#8fc31f',
				num: 40,
				width:235
			}

		},
		methods: {
			format(percentage) {
				return percentage <= 50 ? `初级 ${this.num}分` : `${percentage}分` ||
					percentage >= 100 ? `高级 ${this.num}分` : `${percentage}分`

			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		width: 470rpx;
		height: 470rpx;
		// background-color: #e4e4e4;
		margin: 50rpx auto;
	}

	.text {
		// width: 582rpx;
		margin: 30rpx;
		height: 22rpx;
		font-family: YouYuan;
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		transform: scale(0.83333);
		letter-spacing: 0rpx;
		color: #646464;
	}

	.bon {
		width: 710rpx;
		height: 218rpx;
		margin: auto;

		.top {
			height: 155rpx;
			height: 100%;
			width: 100%;
			border-top: 1rpx solid #cbcbcb;
			border-bottom: 1rpx solid #cbcbcb;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.box {
				width: 30%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.boxx1 {
					// width: 150rpx;
					margin: 20rpx 0;
					height: 23rpx;
					font-family: YouYuan;
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #323232;
				}
			}
		}
	}
</style>
